<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="utf-8">
  <link href="{{url_for('static', filename='css/bootstrap.min.css')}}" rel="stylesheet">
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
  <title>车票购买系统</title>
  <style>
    .my-h1 {
        margin-bottom: 1rem!important;
		margin-top: 2rem!important;
        text-align: center;
        width: 100%;
        font-size: 52px;
    }
  </style>
</head>
<body class="bg-light">
    <div class="container">
        <h1 class="my-h1 text-center">查询结果</h1>
        <form action="/order" method="post" onsubmit="return validateForm()">
            <div class="row justify-content-center">
                <div class="col-md-10">
                    <div class="card bg-light">
                        <div class="card-body">
                            <div class="row mb-3">
                                <label for="train" class="form-label fs-3">选择车次({{ date_str }})：</label>
                                {% for one in train_list %}
                                    <div class="input-group">
                                        <div class="input-group-text">
                                        <input class="form-check-input mt-0" type="radio" name="train" id="train" value="{{ one }}" aria-label="Radio button for following text input">
                                        </div>
                                        <input type="text" class="form-control" value="{{ one[4] }} ({{ one[5] }})" aria-label="Text input with radio button" style="max-width: 600px;" readonly>
                                    </div>
                                {% endfor %}
                            </div>
                            <div class="row mb-3 fs-4">
                                <div class="col-md-4">
                                    <label for="seat" class="form-label">选择座位：</label>
                                </div>
                                <div class="col">
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="seat" id="seat1" value="一等座">
                                        <label class="form-check-label" for="seat1">一等座</label>
                                    </div>
                                    <div class="form-check form-check-inline">
                                        <input class="form-check-input" type="radio" name="seat" id="seat2" value="二等座">
                                        <label class="form-check-label" for="seat2">二等座</label>
                                    </div>
                                </div>                           
                            </div>
                            <div class="row mb-3 fs-5">
                                <div class="col-md-4">
                                    <label for="name" class="form-label">乘车人姓名：</label>
                                </div>
                                <div class="col-md-4">
                                    <input type="text" id="name" name="name" class="form-control">
                                </div>
                            </div>
                            <input type="hidden" name="date_str" value="{{ date_str }}">
                            <div class="row justify-content-center">
                                <div class="col-auto">
                                    <input type="submit" value="提交订单" class="btn btn-primary">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <script>
        function validateForm() {
            var train = document.querySelector('input[name="train"]:checked');
            var seat = document.querySelector('input[name="seat"]:checked');
            var name = document.getElementById("name").value;

            if (!train || !seat || name === "") {
                alert("请填写所有选项");
                return false;
            }
        }
    </script>
</body>
</html>